import {ReactNode} from 'react'

const Box = ({width, height, bgColor, radius, padding, shadow, children, style, flex, wrap, justify, align, direction, marginBottom, onClick, marginRight, marginTop, onMouseOver, onMouseLeave}) => (
    <div className={'box'} style={style} onClick={onClick} onMouseOver={onMouseOver} onMouseLeave={onMouseLeave}>
        {children}
        <style jsx>{`
            .box{
                width:${width || 'auto'};
                height:${height || 'auto'};
                background:${bgColor};
                border-radius:${radius || 0};
                box-sizing: border-box;
                padding: ${padding};
                box-shadow: ${shadow};
                display: ${flex};
                justify-content: ${justify || 'center'};
                align-items:${align || 'center'};
                flex-direction: ${direction || 'row'};
                flex-wrap: ${wrap || 'wrap'};
                margin-bottom:${marginBottom};
                margin-right:${marginRight};
                margin-top: ${marginTop}
            }
        `}
        </style>
    </div>
)

export default Box